<template>
	<view class="ikz-orderdetail">
		<view class="ikz-tips">
			<view class="ikz-tips-title">
				需要帮助
			</view>
			<!-- <view class="ikz-orderdetail-tips-desc">
        订单超过一小时将自动取消
      </view> -->
		</view>
		<view class="ikz-orderdetail-top">
			<view class="ikz-orderdetail-top-code">
				<view class="ikz-orderdetail-top-num">
					订单编号：{{showData.order_no}}
				</view>
				<view class="ikz-orderdetail-top-status">
					需要帮助
				</view>
			</view>
			<view class="ikz-orderdetail-list-item">
				<view class="ikz-orderdetail-list-top">
					<view class="ikz-orderdetail-list-head">
						<image class="ikz-orderdetail-list-img" :src="showData.avatar"></image>
					</view>
					<view class="ikz-orderdetail-list-head-right">
						<view class="ikz-orderdetail-list-head-right-box">
							<view class="ikz-orderdetail-list-head-name">
								{{showData.nickname}}
							</view>
							<view class="ikz-orderdetail-list-head-time">
								{{showData.createtime}}
							</view>
						</view>
						<view class="ikz-orderdetail-list-head-right-box">
							<view class="ikz-orderdetail-list-head-card">
								{{showData.type_text}}
							</view>
							<view style="font-size: 30rpx;">
								订单金额 <text style="color: red;">￥{{showData.price}}</text>
							</view>
							<view  v-if="receiver == 1" style="font-size: 30rpx;">
								预估收益<text class="ikz-orderdetail-list-head-price">￥{{showData.total_fee}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="ikz-orderdetail-list-content">
					{{showData.information}}
				</view>
			</view>
		</view>

		<view class="ikz-orderdetail-other">
			<view class="ikz-orderdetail-other-title" v-if="showData.receive_limit">
				<view class="ikz-orderdetail-other-top">
					<view class="ikz-sticky-spot2"></view>
					<view class="ikz-orderdetail-other-top-title">
						接单限制
					</view>
				</view>
				<view class="ikz-orderdetail-other-content">
					{{showData.receive_limit}}
				</view>
			</view>
			<view class="ikz-orderdetail-other-title" v-if="showData.game_time">
				<view class="ikz-orderdetail-other-top">
					<view class="ikz-sticky-spot1"></view>
					<view class="ikz-orderdetail-other-top-title">
						游戏时间
					</view>
				</view>
				<view class="ikz-orderdetail-other-content">
					{{showData.game_time}}
				</view>
			</view>
			<view class="ikz-orderdetail-other-title" v-if="showData.game_platform">
				<view class="ikz-orderdetail-other-top">
					<view class="ikz-sticky-spot"></view>
					<view class="ikz-orderdetail-other-top-title">
						游戏名称
					</view>
				</view>
				<view class="ikz-orderdetail-other-content">
					{{showData.game_platform}}
				</view>
			</view>

			<view class="ikz-orderdetail-other-title" v-if="showData.start">
				<view class="ikz-orderdetail-other-top">
					<view class="ikz-sticky-spot"></view>
					<view class="ikz-orderdetail-other-top-title">
						取货地址
					</view>
				</view>
				<view class="ikz-orderdetail-other-content">
					{{showData.start}}
				</view>
			</view>
			<view class="ikz-orderdetail-other-title" v-if="showData.destination">
				<view class="ikz-orderdetail-other-top">
					<view class="ikz-sticky-spot1"></view>
					<view class="ikz-orderdetail-other-top-title">
						收货地址
					</view>
				</view>
				<view class="ikz-orderdetail-other-content">
					{{showData.destination}}
				</view>
			</view>

			<view class="ikz-orderdetail-other-title" v-if="showData.lease_duration">
				<view class="ikz-orderdetail-other-top">
					<view class="ikz-sticky-spot2"></view>
					<view class="ikz-orderdetail-other-top-title">
						租借时长
					</view>
				</view>
				<view class="ikz-orderdetail-other-content">
					{{showData.lease_duration}}
				</view>
			</view>
			<view class="ikz-orderdetail-other-title" v-if="showData.hope_arrive">
				<view class="ikz-orderdetail-other-top">
					<view class="ikz-sticky-spot1"></view>
					<view class="ikz-orderdetail-other-top-title" v-if="showData.type == 4">
						预计交付时间
					</view>
					<view class="ikz-orderdetail-other-top-title" v-else>
						送达时间
					</view>
				</view>
				<view class="ikz-orderdetail-other-content">
					{{showData.hope_arrive}}
				</view>
			</view>
		</view>
		<view class="ikz-orderdetail-tips" v-if="showData.remarks">
			<view class="ikz-orderdetail-tips-item">
				<view class="ikz-orderdetail-tips-help">
					<view class="ikz-orderdetail-tips-help-title">
						备注信息
					</view>
					<view class="ikz-orderdetail-tips-help-content">
						{{showData.remarks}}
					</view>
				</view>
			</view>
		</view>
		<view class="ikz-orderdetail-tips" v-if="showData.annex_information_images && showData.annex_information_images.length">
			<view class="ikz-orderdetail-tips-item">
				<view class="ikz-orderdetail-tips-help">
					<view class="ikz-orderdetail-tips-help-title">
						附件信息
					</view>
					<view class="ikz-updata-bottom">
						<view class="ikz-updata-add" v-for="(item,index) in showData.annex_information_images"
							:key="index">
							<image class="ikz-updata-img" mode="aspectFill"
								@click="showPic(showData.annex_information_images,item)" :src="item"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ikz-bottom">
			<button class="ikz-help-share" open-type="share">
				分享订单
			</button>
			<view class="ikz-help-btn" @click="orderReceiving(showData.id)">帮助TA</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import ikz from '@/pages/Common/tools';
	export default {
		name: 'orderdetail',
		components: {

		},
		props: {
			showData: {
				type: Object,
			},
			cssData: {
				type: Object,
			},
			receiver:{
			  type: String,
			}
		},
		data() {
			return {
				
			};
		},
		mounted() {

		},
		methods: {
			showPic(urls, current) {
				wx.previewImage({
					current: current, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				})
			},
			orderReceiving(id) {
				if (!uni.getStorageSync('local_user_session')) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return
				}
				//跳转申请接单员
				var path = '/xyb/user/auth';
				var data = {}
				ikz.post(path, data, res => {
					if (res.data.code) {
						//-1已驳回，0未审核，1已通过，2未申请
						if (res.data.data.run_apply_status == 1) {
							uni.navigateTo({
								url: '/pages/Component/Module/Receiver/Program/order/detail/index?id=' + id
							})
						} else if (res.data.data.run_apply_status == 0) {
							uni.showModal({
								title: '提示',
								content: '已申请，审核中'
							})
						} else if (res.data.data.run_apply_status == -1) {
							uni.navigateTo({
								url: '/pages/Component/Module/Receiver/Program/apply/applyfail/index'
							})
						} else {
							uni.showModal({
								title: '提示',
								content: '您还不是接单员',
								confirmText: '去申请',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/Component/Module/Receiver/Program/apply/index/index'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
						this.$forceUpdate();
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
				});


			},
		}
	};
</script>

<style lang="scss" scoped>
	.ikz-tips {
		box-sizing: border-box;
		width: 90%;
		margin: 30rpx auto;
		border-radius: 15rpx;
	}

	.ikz-tips-title {
		color: #fff;

	}

	.ikz-orderdetail-tips-desc {
		font-size: 25rpx;
		color: #fff;
		margin-top: 10rpx;
	}

	.ikz-orderdetail {
		width: 100%;
		height: 100%;
	}

	.ikz-orderdetail-top {
		box-sizing: border-box;
		width: 95%;
		background: #fff;
		margin: 30rpx auto;
		border-radius: 15rpx;
	}

	.ikz-orderdetail-top-code {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}

	.ikz-orderdetail-top-num {
		box-sizing: border-box;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #888;
	}

	.ikz-orderdetail-top-status {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: linear-gradient(to right, #FDAF64, #FBAB7E);
		color: #fff;
		font-size: 28rpx;
		border-top-right-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
	}

	.ikz-orderdetail-list-item {
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 15rpx;
	}

	.ikz-orderdetail-list-top {
		display: flex;
		align-items: center;
	}

	.ikz-orderdetail-list-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.ikz-orderdetail-list-head-right {
		margin-left: 20rpx;
		width: 85%;
	}

	.ikz-orderdetail-list-head-right-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 50rpx;
	}

	.ikz-orderdetail-list-head-time {
		color: #888;
		font-size: 25rpx;
	}

	.ikz-orderdetail-list-head-card {
		background-color: #FDAF64;
		color: #fff;
		font-size: 23rpx;
		border-radius: 15rpx;
		padding: 0px 10rpx;
		text-align: center;
		line-height: 45rpx;

	}

	.ikz-orderdetail-list-head-price {
		color: #FDAF64;
	}

	.ikz-orderdetail-list-content {
		line-height: 45rpx;
		font-size: 30rpx;
		margin: 15rpx 0;
	}

	.ikz-orderdetail-list-head-name {
		font-size: 28rpx;
	}



	/* dibu*/
	.ikz-orderdetail-other {
		box-sizing: border-box;
		width: 95%;
		background: #fff;
		margin: 30rpx auto;
		border-radius: 15rpx;
	}

	.ikz-orderdetail-other-top {
		display: flex;
		align-items: center;
	}

	.ikz-orderdetail-other-img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}

	.ikz-orderdetail-other-title {
		box-sizing: border-box;
		padding: 20rpx;
		line-height: 60rpx;
	}

	.ikz-orderdetail-other-top-title {
		color: #888;
		font-size: 28rpx;
	}

	.ikz-orderdetail-other-content {
		margin-left: 65rpx;
	}

	.ikz-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}

	.ikz-help-btn {
		position: relative;
		width: 55%;
		background: #42D5BE;
		border-radius: 50rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		height: 100rpx;
		font-size: 28rpx;
	}
	
	
	.ikz-help-share {
		position: relative;
		width: 35%;
		background: #FB7A26;
		border-radius: 50rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		height: 100rpx;
		margin:0 16rpx 0 0;
		font-size: 28rpx;
	}

	.ikz-sticky-spot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #76A8FD;
		margin-right: 20rpx;
	}

	.ikz-sticky-spot1 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #FF8800;
		margin-right: 20rpx;
	}

	.ikz-sticky-spot2 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #009423;
		margin-right: 20rpx;
	}

	.ikz-orderdetail-tips {
		box-sizing: border-box;
		padding: 10rpx 40rpx;
		width: 95%;
		background: #fff;
		margin: 10px auto;
		border-radius: 15rpx;
	}

	.ikz-orderdetail-tips-item {
		padding: 20rpx 0px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ikz-orderdetail-tips-item:before {
		content: " ";
		position: absolute;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1rpx solid #d9d9d9;
		color: #d9d9d9;
		left: 0px;
	}

	.ikz-orderdetail-tips-item:first-child:before {
		display: none;
	}

	.ikz-orderdetail-tips-help-title {
		line-height: 60rpx;
	}

	.ikz-orderdetail-tips-help-content {
		line-height: 50rpx;
		color: #828282;
	}

	.ikz-updata-img {
		width: 150rpx;
		height: 150rpx;
	}

	.ikz-updata-add {
		position: relative;
		margin-left: 10rpx;
	}

	.ikz-updata-img {
		width: 150rpx;
		height: 150rpx;
	}

	.ikz-updata-bottom {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
</style>
